<template>
	<view class="center">
		<view class="user">
			<view class="bac">
			<view class="money">
				<image src="../../../static/images/s53.png" mode="widthFix" ></image>
				<text>我的钱包</text>
			</view>
		<text>{{userInfo.level == 0? '' :`${userInfo.levelname }：${userInfo.zk}折`}}</text>
			</view>
			<view class="hes">
				<text :class="indexNmber == index ? '':'tix'" v-for="(item,index) in pay"  :key='index' @tap='selectr(index)'>{{item}}</text>
			</view>
		</view>
		<view class="topup" v-if="indexNmber === 0">
			<input v-model="numbers" type="text" value="" placeholder="充值金额" />
			<text>元</text>
		</view>
		<view class="way" v-if="indexNmber === 0">
			<text>支付方式</text>
			<view class="waybao">
			<view class="baoflex">
				<view class="bao">
					<image src="../../../static/images/s44.png" mode="widthFix"></image>
					<text>支付宝支付</text>
				</view>
					<image v-if="courrt===0"  src="../../../static/images/s46.png" mode="widthFix" ></image>
					<image  v-if="flag" src="../../../static/images/s40.png" mode="widthFix" @tap='zif(0)'></image>
			</view>
			<view class="baoflex">
				<view class="bao">
					<image src="../../../static/images/s45.png" mode="widthFix"></image>
					<text>微信支付</text>
				</view>
				<image v-if="!flag" src="../../../static/images/s40.png" mode="widthFix" @tap='zif(1)'></image>
					<image v-if="courrt===1"  src="../../../static/images/s46.png" mode="widthFix" ></image>
			</view>
			</view>
		</view>
		<text v-if="indexNmber == 0" class="btn" @tap='topups'>充值</text>
		
		
	
		<view class="topup" v-if="indexNmber == 1" >
			<input v-model="num" type="text" value="" placeholder="充值金额" />
			<text>元</text>
		</view>
		<view class="way" v-if="indexNmber == 1">
			<text>支付方式</text>
			<view class="waybao">
			<view class="baoflex">
				<view class="bao">
					<image src="../../../static/images/s44.png" mode="widthFix"></image>
					<text>支付宝支付</text>
				</view>
					<image v-if="courrt===0"  src="../../../static/images/s46.png" mode="widthFix" ></image>
					<image  v-if="flag" src="../../../static/images/s40.png" mode="widthFix" @tap='zif(0)'></image>
			</view>
			<view class="baoflex">
				<view class="bao">
					<image src="../../../static/images/s45.png" mode="widthFix"></image>
					<text>微信支付</text>
				</view>
				<image v-if="!flag" src="../../../static/images/s40.png" mode="widthFix" @tap='zif(1)'></image>
					<image v-if="courrt===1"  src="../../../static/images/s46.png" mode="widthFix" ></image>
			</view>
			</view>
		</view>
		<text v-if="indexNmber == 1" class="btns" @tap='withdraw'>提现</text>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				courrt:0,
				flag:false,
				//充值
				numbers:'',
				//提现
				num:'',
				indexNmber:0,
				pay:['充值','提现']
			}
		},
		onShow() {
			//用户信息
			this.users()
		},
		methods: {
			selectr(index){
				
				this.indexNmber = index
			},
		//用户信息
		users(){
			this.$ajax(
			this.apiList.users,
			'POST',
			).then(res=>{
				this.userInfo = res.data
				// console.log(res)
			})
		},
		zif(index){
			this.flag = !this.flag
			this.courrt =index
			},
			//充值
			topups(){
				if(this.courrt === 0){
					this.$ajax(
					this.apiList.topup,
					{
						money:this.numbers,
						way:'ali'
					},
					'POST'
					).then(res=>{
						console.log(res)
						uni.requestPayment({
						      provider: 'alipay',
						      orderInfo: res.data,
						      success: res => {
								this.$sToast(res.msg)
								uni.switchTab({
									url:'../user'
									})
						     },
						      fail: res => {
											this.$sToast('支付失败')
						      }
						     });
					})
				}else if(this.courrt === 1){
					this.$ajax(
					this.apiList.topup,
					{
					money:this.numbers,
					way:'wx'
					},'POST'
					).then(res=>{
						uni.requestPayment({
							provider: 'wxpay',//微信支付
							orderInfo: {
						     "appid": res.data.appid,
						     "noncestr": res.data.noncestr,
						     "package": "Sign=WXPay",
						     "partnerid": res.data.partnerid,
						     "prepayid": res.data.prepayid,
						     "timestamp": res.data.timestamp,
						     "sign": res.data.sign										
							},
						    success: res => {
								this.$sToast(res.msg)
								uni.switchTab({
									url:'../user'
									})
						      },
						      fail: res => {
								  console.log(res)
										this.$sToast('支付失败')
						      }
						   });
					})
				}
			},
			//提现
			withdraw(){
				this.$ajax(
				this.apiList.tixian,
				{
					money:this.num
				},
				'POST'
				).then(res=>{
					// console.log(res)
					this.$sToast(res.msg)
					this.num = ''
				})
			}
		}
	}
</script>

<style lang="scss"scoped>
.center{
	padding: 30upx;
	background: #eee;
	height: 100vh;
	width: 100%;
	box-sizing: border-box;
	.user{
		width: 100%;
		box-sizing: border-box;
		.bac{
			display: flex;
			flex-direction: row;
			width: 100%;
			height: 120upx;
			background: url(../../../static/images/s48.png) no-repeat;
			background-size: 100%;
			display: flex;
			justify-content: space-between;
			padding: 30upx;
			box-sizing: border-box;
			align-items: center;
			.money{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 40%;
				image{
					width: 52upx;
				}
				text{
					font-size:20upx;
					font-family:PingFang SC;
					font-weight:400;
					color: rgba(54, 111, 56, 1);
				}
			}
			text{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color: rgba(54, 111, 56, 1);
				
			}
			}
		.hes{
			width: 100%;
			height: 88upx;
			background: url(../../../static/images/s49.png) no-repeat;
			background-size: 100%;
			display: flex;
			justify-content: space-between;
			padding: 30upx;
			box-sizing: border-box;
			text-align: center;
			text{
				display: inline-block;
				height: 100%;
				width: 50%;
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:bold;
				color: rgba(255, 255, 255, 1);
			}
			.tix{
				display: inline-block;
				height: 100%;
				width: 50%;
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(54, 111, 56, 1);
			}
		}
	}
	.topup{
		margin-top: 30upx;
		width: 100%;
		height: 80upx;
		border-radius: 10upx;
		border: 1upx solid #ccc;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		input{
			display: inline-block;
			width: 100%;
			height: 100%;
			flex: 9;
		}
		text{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:500;
			color: rgba(97, 97, 97, 1);
		}
	}
	.way{
		width: 100%;
		box-sizing: border-box;
		text{
			display: inline-block;
			width: 100%;
			font-size:32upx;
			font-family:PingFang SC;
			font-weight:500;
			margin: 20upx 0;
			color: rgba(97, 97, 97, 1);
		}
		.waybao{
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20upx;
			padding: 20upx;
			.baoflex{
				display: flex;
				justify-content: space-between;
				height: 80upx;
				align-items: center;
				.bao{
						display: flex;
						align-items: center;
					image{
						width: 48upx;
						margin-right: 20upx;
					
					}
					text{
						font-size:28upx;
						font-family:PingFang SC;
						font-weight:400;
						color: rgba(33, 33, 33, 1);
					}
				}
				image{
					width: 40upx;
				}
			}
			
		}
	}
	.btn{
		position: fixed;
		display: inline-block;
		width: 100%;
		height: 88upx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
	background-color:#13CA62 ;
	text-align: center;
	line-height: 88upx;
	color: #fff;
	letter-spacing: 10upx;
	}
	.btns{
		position: fixed;
		display: inline-block;
		width: 100%;
		height: 77upx;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		background-color:#13CA62 ;
		text-align: center;
		line-height: 88upx;
		color: #fff;
		letter-spacing: 10upx;
	}
}
</style>
